<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>高清无码台管理系统</title>
    <link rel="stylesheet" href="/layui-v2.6.8/layui/css/layui.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css" rel="stylesheet">
    <style>
        .c-gray {
            color: #ccc;
        }

        .c-green {
            color: green;
        }

        .c-red {
            color: red;
        }

        .photo {
            width: 300px;
            margin: auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .photo img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <!-- 引入公共页面 -->
        {{include "./common/header.html" }}
        <!-- 引入公共页面 -->
        {{include "./common/side_menu.html" }}

        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <span class="layui-breadcrumb" lay-separator="/">
                    <a href="/">首页</a>
                    <a href="/classify-list">分类列表</a>
                </span>
                <div style="text-align:center;padding:30px;">
                </div>
                <div>
                    <table style="text-align: center;" rules="all" class="layui-table">
                        <thead>
                            <tr>
                                <td>序号</td>
                                <td width="200px">分类名</td>
                                <td>是否显示前台</td>
                                <td>添加时间</td>
                                <td>更新时间</td>
                                <td>操作</td>
                            </tr>
                        </thead>
                        <tbody id="tbody">

                        </tbody>

                    </table>
                </div>
            </div>
        </div>

    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="/layui-v2.6.8/layui/layui.js"></script>
    <script>
        layui.use(['element', 'layer', 'util'], function () {
            var element = layui.element
                , layer = layui.layer
                , util = layui.util
                , $ = layui.$;

            //头部事件
            util.event('lay-header-event', {
                //左侧菜单事件
                menuLeft: function (othis) {
                    layer.msg('展开左侧菜单的操作111', { icon: 0 });
                }
                , menuRight: function () {
                    layer.open({
                        type: 1
                        , content: '<div style="padding: 15px;">处理右侧面板的操作234</div>'
                        , area: ['260px', '100%']
                        , offset: 'rt' //右上角
                        , anim: 5
                        , shadeClose: true
                    });
                }
            });

        });
        // 页面加载完毕，需要获取分类数据
        $(function () {
            // 加载分类
            loadCate();
        })

        const isShowTextMap = {
            0: "<span style='color:gray'>不显示</span>",
            1: "<span style='color:green'>显示</span>",
        }

        function loadCate() {
            $.get("/getCateData", function (res) {
                // 动态构造tr标签
                let tbodyHtml = '';
                res.forEach((cate, index) => {
                    let { id, name, isshow, duplicate, addtime } = cate;
                    isshow = isShowTextMap[isshow];
                    tbodyHtml += `<tr>
                <td>${index + 1}</td>
                <td width="200px">${name}</td>
                <td>${isshow}</td>
                <td>${duplicate}</td>
                <td>${addtime}</td>
                <td>
                  <button type="button" data-catid='${id}'  class="layui-btn  layui-btn-sm layui-btn-radius layui-btn-normal edit">编辑 </i></button>
                  <button type="button" data-catid='${id}' class="layui-btn  layui-btn-sm  layui-btn-radius layui-btn-danger delete">删除 </i></button>
                </td>
          </tr>`
                    //把数据导入到tbody中
                    $("#tbody").html(tbodyHtml)
                })
            }, 'json')
        }

        // // 删除操作(对于动态新增的元素绑定事件需要用事件委托（代理）)
        $("tbody").on('click', '.delete', function () {
            let _that = this
            layer.confirm('确认删除吗', {
                btn: ['是的', '取消'] //按钮
            }, function () {
                // 获取要删除分类的id
                let cat_id = $(_that).attr('data-catid')
                $.post('/deleteCate', { cat_id }, function (res) {
                    let { message, errcode } = res
                    layer.msg(message)
                    if (errcode === 200) {
                        console.log('成功');
                        // 重新加载分类
                        loadCate();
                    }
                }, 'json')
            }, function () {

            });



        })
        // 跳转到编辑页面
        $("tbody").on('click', '.edit', function () {
            // 获取当前要删除的分类的id
            let cat_id = $(this).attr('data-catid')
            location.href = "/editorCate?cat_id=" + cat_id;
        })

    </script>

</body>

</html>